<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useCommonStore } from '@/stores/common';
import { querySearch } from '@/api';
import { useRouter } from 'vitepress';
import { useI18n } from 'vue-i18n';
import OSearch from '@/components/OSearch.vue';
import OPagination from '@/components/OPagination.vue';
import type { TabsPaneContext } from 'element-plus';

import searchError from '@/assets/search-error.png';
import searchErrorDark from '@/assets/search-error-dark.png';

const useCommon = useCommonStore();
const router = useRouter();
const { t } = useI18n();

const getList = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(9);
const tabData = ref([]);
const filterType = ref('');
// 获取数据
async function querySearchData() {
  try {
    let obj = {
      type: filterType.value,
      lang: useCommon.language,
      page: page.value,
      pageSize: pageSize.value,
      keyword: useCommon.search,
    };
    const res = await querySearch(obj);
    if (res.status === 200) {
      const data = res.obj.records;
      getList.value = data;

      if (filterType.value == '') {
        tabData.value = res.obj.totalNum;
      }
      total.value = res.obj.totalNum[0].count;
    } else {
      getList.value = [];
      throw new Error(res.status + ' ' + res.message);
    }
  } catch (error) {
    console.error('授权获信息失败', error);
  }
}

onMounted(() => {
  querySearchData();
});

const searchClick = () => {
  querySearchData();
};
const clearSearch = (flag: boolean) => {
  if (flag) {
    useCommon.search = '';
  }
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.value = val;
  querySearchData();
};

const activeName = ref('all');
const handleClick = (tab: TabsPaneContext, event: Event) => {
  filterType.value = tab.paneName !== 'all' ? tab.paneName : '';
  querySearchData();
};

// 搜索type转换
const switchType = (type: string) => {
  const text = ref('');
  switch (type) {
    case 'all':
      text.value = t('all');
      break;
    case 'docs':
      text.value = t('nav.learning.docs');
      break;
    case 'blog':
      text.value = t('nav.information.blogs');
      break;
    case 'news':
      text.value = t('nav.information.news');
      break;
    case 'events':
      text.value = t('nav.information.events');
      break;
  }
  return text.value;
};

// 结果跳转
const goLink = (path: string) => {
  if (path.includes('events')) {
    router.go(`/${useCommon.language + '/activity/'}`);
  } else {
    router.go(`/${useCommon.language + '/' + path.slice(0, -5)}`);
  }
};

const themeStyle = computed(() => (useCommon.theme === 'light' ? true : false));
</script>

<template>
  <div class="wrapper">
    <div class="search-main">
      <o-search
        @search-click="searchClick"
        @clear-search="clearSearch"
      ></o-search>
      <div class="search-result">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
          v-if="getList.length > 0"
        >
          <el-tab-pane
            v-for="item in tabData"
            :label="`${switchType(item.key) + ' (' + item.count + ')'}`"
            :key="item.key"
            :name="item.key"
          >
            <ul class="search-list">
              <li
                class="search-list-item"
                v-for="list in getList"
                :key="list.id"
                @click="goLink(list.path)"
              >
                <h3 class="title" v-html="list.title"></h3>
                <p class="desc" v-html="list.textContent"></p>
                <p class="type">
                  {{ t('search_from') }}{{ switchType(list.type) }}
                </p>
              </li>
            </ul>
            <o-pagination
              :page-size="pageSize"
              :page="page"
              :total="total"
              @current-change="handleCurrentChange"
            ></o-pagination>
          </el-tab-pane>
        </el-tabs>
        <div v-else class="search-error">
          <img
            class="search-error-img"
            :src="themeStyle ? searchError : searchErrorDark"
            alt=""
          />
          <p class="text">{{ t('search_error') }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.search-list-item span {
  color: var(--theme-active);
  font-weight: 700;
}
</style>
<style lang="scss" scoped>
.search-main {
  padding: 64px 0;
  :deep(.header-search) {
    margin-bottom: 24px;
    .header-search-box {
      height: 56px;
      border: 1px solid var(--theme-black);
      background: var(--theme-card-bg);
      padding: 0 16px;
    }
    .icon {
      font-size: 24px;
    }
    .header-search-result {
      top: 56px;
    }
  }
  .search-result {
    background: var(--theme-card-bg);
    min-height: 500px;
    .search-list {
      &-item {
        margin-bottom: 40px;
        cursor: pointer;
        .title {
          font-size: 24px;
          font-weight: 600;
          color: var(--theme-title);
          line-height: 32px;
        }

        .desc {
          font-size: 14px;
          color: var(--theme-text);
          line-height: 22px;
          margin: 16px 0 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .type {
          font-size: 14px;
          color: var(--theme-text);
          line-height: 22px;
        }
      }
    }
  }
}
.el-tabs {
  :deep(.el-tabs__header) {
    .el-tabs__nav-wrap {
      padding: 0 40px;
    }
    .el-tabs__item {
      font-size: 16px;
      height: 48px;
      line-height: 48px;
      color: var(--theme-text);
      &.is-active {
        color: var(--theme-active);
      }
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: var(--theme-active);
  }
  :deep(.el-tab-pane) {
    padding: 40px;
  }
}
.search-error {
  text-align: center;
  padding: 64px 0;
  &-img {
    width: 485px;
    object-fit: cover;
    margin-bottom: 20px;
  }
  .text {
    font-size: 14px;
    color: var(--theme-text);
    line-height: 22px;
  }
}
</style>
